<template>
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>
      <!-- 支付状态：NavMenu导航菜单 -->
      <div class="paystatus">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">所有订单</el-menu-item>
            <el-menu-item index="2">已上传</el-menu-item>
            <el-menu-item index="3">未上传</el-menu-item>
          </el-menu>
          
        <div class="line"></div>
      </div>
      <!-- 支付状态：NavMenu导航菜单 -->

      <!-- 搜索框 -->
      <el-form inline class="search" size="small">
          <el-form-item>
            <div style="display:flex; justify-content:space-between;">
              <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入物流单号/发件人">
              </el-input>
              <el-button type="primary" style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);border-radius: 3px;"
                @click="getTableList" icon="el-icon-search">
                搜索</el-button>
            </div>
          </el-form-item>
        </el-form>
      <!-- 搜索框 -->
      <!-- 表格 -->
        <el-table
          ref="tableData" 
          v-loading="loading" 
          :data="listData.list" 
          highlight-current-row
          :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
          style="width:100%;"
          :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }"
          class="table"
        >
        <el-table-column align=center label="下单时间" prop="ordertime" show-overflow-tooltip></el-table-column>
        <el-table-column align=left label="物流单" prop="note" show-overflow-tooltip></el-table-column>
        <el-table-column align=left label="发件人" prop="addresser" show-overflow-tooltip></el-table-column>
        <el-table-column align=left label="收件人" prop="receive" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="费用" prop="bill" show-overflow-tooltip></el-table-column>
        <el-table-column align=center label="支付状态" prop="payment" show-overflow-tooltip></el-table-column>
        <el-table-column
          align=center
          label="回单详情"
          prop="replydetail"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="lookImg(scope.row)">查看</el-link>
          </template>
        </el-table-column>
        <el-table-column align=left label="签收时间" prop="receiptime" show-overflow-tooltip></el-table-column>
      </el-table>
      <!-- 表格 -->

      <!-- 弹窗 -->
      <el-dialog
        :visible.sync="dialogVisible "
        width="50%"
        height="80%"
      >
        <!-- 这是一张图片 -->
        <img src="" alt="">
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 弹窗 -->

      <!-- 分页 -->
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="[20,40,60]"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
      <!-- 分页 -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ClaimsSend",
  data() {
    return {
      // 查看弹窗默认关闭
      dialogVisible :false,
      // Nav导航栏默认在第一个
      activeIndex: '1',
    
      //表格数据
      // listData: { list: [{name:'静态页面'}] },
      listData: {
        list:[
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
          {
            ordertime: '2022-10-25 17:25:12',
            note: 'HYWL202210250001',
            addresser: '联想桦叶官方店',
            receive: '李生',
            bill: '¥20',
            payment: '已支付',
            receiptime: '2022-10-25 17:25:12',
          },
        ]
      },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit:20,
        total:0,
      },
      //多选
      menuList: [],
      loading:false,
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    // 点击nav的哪一项时，会出现什么效果
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    lookImg(){
      this.dialogVisible = true
    },
    // 确认弹窗关闭
    handleClose(done) {
      this.dialogVisible = false
    },
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    }
  }
}
</script>

<style lang="scss" scoped>
.line{
  margin-bottom: 8px;
}
.paystatus{
  margin-right: 17px;
}
.nav{
  display: flex;
  align-items: center;
}
.search{
  left: 262px;
  top: 235px;
  width: 360px;
  height: 32px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 1);
  /* border: 1px solid rgba(217, 217, 217, 1); */
}
.table{
  margin-top: 8px;
}
el-table-column{
  font-size: 12px;
  color: rgba(112, 112, 112, 1);
  text-align: left;
  vertical-align: middle;
}
</style>
